<div class="ibox float-e-margins">
    <div class="ibox-title" style="border: none;">
        <h5 style="color: #00afef"><i>Add</i></h5>
        <div id="form-add-btn" class="ibox-tools">
            <button class="btn btn-sm btn-primary save-btn-tab" id="saveprogs">Save</button>
            <button class="btn btn-sm btn-primary btn-outline close-add cancel-btn-tab">Cancel</button>
        </div>
    </div>
    <div class="ibox-content">
        <form class="form-horizontal" id="program_submit">
            <div class="form-group">
                <label class="col-lg-4 control-label">Program</label>
                <div class="col-lg-5">
                    <select class="form-control chosen" name="program_id">
                        <option value="">--</option>
                        <?php foreach($prog as $p): ?>
                        <option value="<?php echo $p->program_id; ?>"><?php echo $p->program_name; ?></option>
                        <?php endforeach; ?>
                    </select>
                </div>
            </div>
            <div class="form-group">
                <label class="col-lg-4 control-label">Run Type</label>
                <div class="col-lg-5">
                    <select class="form-control chosen" name="run_type">
                        <?php foreach($runtype as $p): ?>
                        <option value="<?php echo $p->lookup_code; ?>"><?php echo $p->meaning; ?></option>
                        <?php endforeach; ?>
                    </select>
                </div>
            </div>
            <div class="form-group">
                <label class="col-lg-4 control-label">Param Values</label>
                <div class="col-lg-5">
                    <input type="text" name="param_values" class="form-control">
                </div>
            </div>
            <div class="form-group">
                <label class="col-lg-4 control-label">Output Type</label>
                <div class="col-lg-5">
                    <select class="form-control chosen" name="output_type">
                        <?php foreach($outtype as $p): ?>
                        <option value="<?php echo $p->lookup_code; ?>"><?php echo $p->meaning; ?></option>
                        <?php endforeach; ?>
                    </select>
                </div>
            </div>
            <div class="form-group">
                <label class="col-lg-4 control-label">Output Options</label>
                <div class="col-lg-5">
                   <select class="form-control chosen" name="output_opt">
                   <option value="">--</option>
                   <?php foreach($outopt as $m){ ?>
                        <option value ="<?php echo $m->lookup_code;?>"><?php echo $m->meaning; ?></option>
                   <?php } ?>
                   </select>
                </div>
            </div>
            <div class="form-group">
                <label class="col-lg-4 control-label">Email</label>
                <div class="col-lg-5">
                    <input type="email" class="form-control" name="email">
                </div>
            </div>
            <div class="form-group">
                <label class="col-lg-4 control-label" >Schedule Type</label>
                <div class="col-lg-5">
                    <select class="form-control chosen" name="sched_type">
                        <?php foreach($schedtype as $p): ?>
                        <option value="<?php echo $p->lookup_code; ?>"><?php echo $p->meaning; ?></option>
                        <?php endforeach; ?>
                    </select>
                </div>
            </div>
           <div class="form-group">
                <label class="col-lg-4 control-label">Interval</label>
                <div class="col-lg-5">
                     <input type="text" name="interval" class="form-control">
                </div>
            </div>
            <div class="form-group">
                <label class="col-lg-4 control-label">Schedule Date</label>
                <div class="col-lg-5">
                    <div class="input-group m-b" id="datetimepicker1">
                        <input readonly name="sched_date" type="text"  class="form-control">
                        <span class="input-group-addon"><i class="fa fa-calendar"></i></span>
                    </div>
                </div>
            </div>
        </form>
    </div>
</div>
<script>
    $(document).ready(function(){
        $('.chosen').chosen({width: "100%"});
        $(".chosen-select").chosen({disable_search_threshold: 10,width: '100%'});
        $('#datetimepicker1').datetimepicker({
            sideBySide: true,
            format : 'YYYY-MM-DD H:m',
            ignoreReadonly: true,
            showClear: true
        });
        $('.clockpicker').clockpicker({
            align: 'left',
            donetext: 'Done',
            placement: 'top'
        });

        $('.i-checks').iCheck({
            checkboxClass: 'icheckbox_square-green',
            radioClass: 'iradio_square-green'
        });

        $('#program_submit select[name=program_id]').change(function(event) {
            var id = $(this).val();
            $.ajax({
                method: 'POST',
                url: "<?php echo base_url($this->session->userdata('forajax') . '/getparams'); ?>",
                data:{'id': id},
                dataType:'json',
                success: function(e){
                    console.log(e);
                    var tmp = '';
                    var count = e.length;
                    $.each(e, function(i, item) {
                        if((count - 1) == i){
                            tmp += e[i].name+'='+e[i].desc;
                        }else{
                            tmp += e[i].name+'='+e[i].desc+'|';
                        }
                    });
                    $('#program_submit input[name=param_values]').val(tmp);
                }
            });
        });

        $("#program_submit").validate({
            rules: {
                program_id: {
                   required: true
                },
                run_type: {
                   required : true
                },
                param_values: {
                   required: true
                },
                output_type: {
                   required: true
                },
                output_opt: {
                   required: true
                },
                sched_type: {
                   required: true
                },
                interval: {
                   required: true
                },
                sched_date: {
                   required: true
                },
                email : {
                    required: true,
                    email: true
                }
            }
        });

        $('#saveprogs').click(function(){
            if($('#program_submit').valid() == true){
                $.ajax({
                    url: "<?php echo base_url($this->session->userdata('forajax') . '/save'); ?>",
                    method: 'POST',
                    data:$('#program_submit').serialize(),
                    dataType:'json',
                    success: function (data) {
                        if(data.err == 1){
                            notifymsg('danger',data.msg);
                        }else{
                            notifymsg('success','Save Success!');
                            close_add();active_search();
                        }
                    },
                    complete: function() {
                        $("#saveprogs").removeAttr("disabled");
                    },
                    beforeSend: function(){
                        $("#saveprogs").attr("disabled", true);
                    }
                });
                //$('#program_submit')[0].reset();
            }
        });

    });
</script>